<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left">
      <el-form-item label="部门名称" class="font">
        <el-input v-model="formInline.name" placeholder="部门名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态 " class="font">
        <el-select v-model="formInline.status" clearable placeholder="状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="异常" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="list2" style="background-color: #da775c;color: #ffffff" icon="el-icon-search">搜索</el-button>
        <el-button style="background-color: #c85e45;color: white" icon="el-icon-refresh-left" @click="clean">重置</el-button>
        <el-button style="background-color: #af513a;color: white" icon="el-icon-circle-plus-outline" @click="openAdd">添加</el-button>
      </el-form-item>
    </el-form>


    <!--添加表单-->
    <el-dialog title="部门添加" class="font" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="部门名称" class="font" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门排名" class="font" :label-width="formLabelWidth">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门状态" class="font" :label-width="formLabelWidth">
          <el-select v-model="form.status" clearable placeholder="状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="异常" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属父级部门" class="font" :label-width="formLabelWidth">
          <el-select v-model="form.personId" placeholder="请选择父级部门">
            <el-option v-for="d in depts" v-bind:key="d.id" :label="d.name" :value="d.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button style="background-color: #f47b56;color: white" plain @click="addDept">添加</el-button>
      </div>
    </el-dialog>



    <!--1视图-->
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="部门名称"
          width="220">
      </el-table-column>
      <el-table-column
          prop="sort"
          label="排序"
          width="180">
      </el-table-column>
      <el-table-column
          label="状态"
          prop="status"
          width="150">
        <template v-slot="scope">
          <el-switch
              style="display: block"
              v-model="scope.row.status"
              active-color="#F47B56FF"
              inactive-color="#8F4021FF"
              :active-value="1"
              :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="createDate"
          label="创建时间"
          width="220">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==1" type="text"  @click="del(scope.row.id)">
            <span style="color: #b3513a;font-size: 20px">
            <i class="el-icon-delete-solid"></i>
            </span>
          </el-button>
          <el-button v-if="scope.row.status==0" type="text" @click="openDept(scope.row.id)">
            <span style="color: #f15b24;font-size: 20px">
            <i class="el-icon-upload"></i>
            </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>


export default {
  name: "DeptView",
  data() {
    return {
      //2属性定义
      tableData:[],
      formInline:{},
      dialogFormVisible:false,
      form:{},
      formLabelWidth:'120px',
      depts:[]
    }
  }, methods: {
    //3自定义方法
    list(){
      this.axios.post("userservice/dept/list").then(res=>{
        this.tableData=res.data.data;
      })
    },
    list2(){
      this.axios.post("userservice/dept/list2",this.formInline).then(res=>{
        this.tableData=res.data.data;
      })
    },
    openAdd(){
      this.dialogFormVisible=true;
      this.form={};
      this.getDepts();
    },
    getDepts(){
      this.axios.post("userservice/dept/list3").then(res=>{
        this.depts=res.data.data;
      })
    },
    addDept(){
      this.axios.post("userservice/dept/addDept",this.form).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    del(id){
      this.axios.post("userservice/dept/del?id="+id).then(res=>{
        if(res.data.code==200){
          console.log("222")
          this.$message.success(res.data.msg);
          this.dialogFormVisible=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    openDept(id){
      this.axios.post("userservice/dept/openDept?id="+id).then(res=>{
        if(res.data.code==200){
          console.log("222")
          this.$message.success(res.data.msg);
          this.dialogFormVisible=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    }

  }, created() {
    //4.钩子函数
    this.list();
  }
}
</script>

<style scoped>
.font{
  font-weight: bold;
}
</style>